<template>
  <div class="table-box w-1/1 h-1/1 bg-[var(--el-bg-color)] p-30px box-border overflow-scroll">
    <div>
      <el-tabs v-model="select" @tab-click="choose">
        <el-tab-pane v-for="(p, index) in list" :key="index" :name="(p as any).id">
          <template #label>
            {{ (p as any).name }}
          </template>
        </el-tab-pane>
      </el-tabs>
      <el-form :model="config" label-width="210" :rules="rules" ref="formRef">
        <el-form-item label="公共线索消耗金币">
          <el-input-number v-model="config.commonClueScore" :min="0" :max="10000"></el-input-number>
        </el-form-item>
        <el-form-item label="楼盘线索消耗金币">
          <el-input-number v-model="config.louPanClueScore" :min="0" :max="10000"></el-input-number>
        </el-form-item>
        <!-- <el-form-item label="每月一号晚上8点发放的金币">
          <el-input-number v-model="config.perMonthScore" :min="0" :max="100000"></el-input-number>
        </el-form-item> -->
        <!-- <el-form-item label="楼盘经纪人金币上限">
          <el-input-number v-model="config.limitScore" :min="0" :max="12000"></el-input-number>
        </el-form-item> -->
        <el-form-item label="住宅首套贷款利率">
          <el-input-number v-model="config.residential" :precision="2" :min="0" :max="10"></el-input-number>
          <span class="pl-5px">%</span>
        </el-form-item>
        <el-form-item label="公积金常用贷款利率">
          <el-input-number v-model="config.gongjijin" :precision="2" :min="0" :max="10"></el-input-number>
          <span class="pl-5px">%</span>
        </el-form-item>
        <el-form-item label="商业常用贷款利率">
          <el-input-number v-model="config.commercial" :precision="2" :min="0" :max="10"></el-input-number>
          <span class="pl-5px">%</span>
        </el-form-item>
        <el-form-item label="A级用户跟进保护期">
          <el-input-number v-model="config.levelA" :min="0" :max="365" :precision="1"></el-input-number>
          <span class="ml-10px">不填写则默认为3天</span>
        </el-form-item>
        <el-form-item label="B级用户跟进保护期">
          <el-input-number v-model="config.levelB" :min="0" :max="365" :precision="1"></el-input-number>
          <span class="ml-10px">不填写则默认为0.5天</span>
        </el-form-item>
        <el-form-item label="C级用户跟进保护期">
          <el-input-number v-model="config.levelC" :min="0" :max="365" :precision="1"></el-input-number>
          <span class="ml-10px">不填写则默认为0天</span>
        </el-form-item>
        <el-form-item label="未评级用户跟进保护期">
          <el-input-number v-model="config.levelD" :min="0" :max="365" :precision="1"></el-input-number>
          <span class="ml-10px">不填写则默认为3天</span>
        </el-form-item>
        <el-form-item label="提交">
          <el-button type="primary" @click="submit">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount, ref, watch } from "vue";
import { getManageCities, getCityConfig, editCityConfig } from "@/api/modules/city_setting";
import { ElMessage, FormInstance, FormRules, TabsPaneContext } from "element-plus";

const select = ref();
const list = ref([]);

const getList = async () => {
  const { data } = await getManageCities();
  list.value = data as any;
  select.value = (list.value[0] as any).id;
};

const rules: FormRules = {
  commonClueScore: [{ message: "数值在0-10000之间", max: 10000, min: 0, trigger: "blur" }],
  louPanClueScore: [{ message: "数值在0-10000之间", max: 10000, min: 0, trigger: "blur" }],
  perMonthScore: [{ message: "数值在0-100000之间", max: 100000, min: 0, trigger: "blur" }],
  limitScore: [{ message: "数值在0-12000之间", max: 12000, min: 0, trigger: "blur" }]
};

const nowId = ref(0);

const initData: any = {
  commonClueScore: 0,
  limitScore: 12000,
  louPanClueScore: 0,
  perMonthScore: 1000,
  region: 0,
  residential: 0.1,
  commercial: 0.1,
  gongjijin: 0.1,
  levelA: 3,
  levelB: 0.5,
  levelC: 0,
  levelD: 0,
  levelE: 0,
  levelF: 0
};

const config = ref(JSON.parse(JSON.stringify(initData)));

const getConfig = async () => {
  const { data } = await getCityConfig({ id: select.value });
  config.value = data;
};

watch(
  () => nowId.value,
  () => {
    getConfig();
  },
  { deep: true }
);

const choose = (pane: TabsPaneContext) => {
  nowId.value = pane.paneName as number;
};

const formRef = ref<FormInstance>();
const submit = () => {
  if (!formRef.value) return;
  formRef.value.validate(async valid => {
    if (!valid) return;
    await editCityConfig(config.value);
    ElMessage.success("成功");
    await getConfig();
  });
};

onBeforeMount(async () => {
  await Promise.all([getList()]);
  getConfig();
});
</script>

<style></style>
